<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      .content{
        width: 100%;
        border: 4px solid orange;
        box-sizing: border-box;
        display: grid;
        /*自适应，宽度最小200px，*/
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
        grid-gap: 10px 30px;
        justify-content: center;
      }
      .content-fill{
        .box{
          width: 100%;
          /* max-width: 250px; */
          /* margin: 0 auto; */
        }
      }
      .content-fit{
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
      }
      .box{
        display: block;
        height: 100px;
        background-color: #ccc;
      }
      
      .content-start{
        grid-template-columns: repeat(auto-fill, minmax(200px 1fr)) !important; 
        grid-auto-flow: row dense;
      }
      .box-start{
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        height: calc(2 * 100px + 10px);
      }
    </style>
  </head>
  <body>
    <div>
      <h1>auto-fill 不足以换行部分会空出</h1>
      <div class="content content-fill">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>

    
    <div>
      <h1>auto-fit 第一行最少会充满</h1>
      <div class="content content-fit">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>

    <div>
      <h1>start</h1>
      <div class="content content-start">
        <div class="box box-start"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </body>
</html>